#swiper {
    width: 99vw;
    height: 100vh;
    overflow: hidden;
    margin: 0 auto;
    position: relative;

}


.imgitem {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

.imgitem img {
    max-width: 100%;
}
.imgitem video {
    max-width: 100%;
}

.leftBtn,
.rightBtn {
    width: 50px;
    height: 50px;
    /* background: rgba(0, 0, 0, .5); */
    z-index: 99;
}

.leftBtn {
    position: absolute;
    left: 50px;
    top: calc(50% - 25px);
    background: url(../images/left.png);
    background-size: cover;
}

.rightBtn {
    position: absolute;
    right: 50px;
    top: calc(50% - 25px);
    background: url(../images/right.png);
    background-size: cover;
}

.circleList {
    width: 200px;
    height: 50px;
    position: absolute;
    left: calc(50% - 100px);
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
z-index: 99;
}

.circleList .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin: 0 5px;
}
.circleList .active {
    background-color: #ccc;
}
.leftJoin {
    /* 进入的动画 */
    animation: leftJoin .5s linear forwards;
    /* z-index: 11; */
    /* z-index: 10; */
    /* display: block; */


}

@keyframes leftJoin {
    from {
        transform: translate(-100%);
    }

    to {
        transform: translate(0%);

    }
}

.leftBefore {
    animation: leftBefore .5s linear forwards;
    /* z-index: 10; */
}

@keyframes leftBefore {
    from {
        transform: translate(0);
    }

    to {
        transform: translate(100%);

    }
}

.rightBefore {
    animation: rightBefore .5s linear forwards;
    /* z-index: 10; */
}

.rightJoin {
    animation: rightJoin .5s linear forwards;
    z-index: 80;

}

@keyframes rightBefore {
    from {
        transform: translate(0);
    }

    to {
        transform: translate(-100%);

    }
}

@keyframes rightJoin {
    from {
        transform: translate(100%);
    }

    to {
        transform: translate(0);

    }
}